<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸问题</title>
		<style>
			/*1+100 取值 选择器被选中几率增加*/
			di v#d1{
				width: 50%;
				height:500px;
				background: rgba(243, 35, 134, .1);
			}
			/* 最大宽度和最小宽度*/
			div#container{
				background:#f0f;
			}
			div.box{
				background: #ff0e42;
				color: #fff;
				width: 80%
				/*最小宽度 设定， 不能改变，移动端*/
				min-width:500px;
				/*最大宽度 设定，宽度最大上限600px ，移动端*/
				min-width:650px;
				/*页面设定最大宽度和最小宽高，约定 移动端宽高比。 页面错乱*/
			}
		</style>
	</head>
	<body>
		<div id="di"></div>
		<!--最大宽度和最小宽度 ：
		 自适应： 编写页面在任何·浏览器下正常显示 -->
		<div id="container">
			<div class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi laudantium reiciendis quod error corporis explicabo nulla quibusdam voluptatem beatae architecto aspernatur, consequuntur aut, praesentium voluptates iure earum distinctio impedit veniam.</div>
		</div>
	</body>
</html>